<script setup>
	import {
		getrpbyid,
		getcommentbyid,
		getscorebyid
	} from '@/api/getData.js'
	import {
		onMounted,
		reactive,
		ref
	} from "vue";
	import * as echarts from 'echarts';
	import {
		getStorage
	} from "@/utils/localStorage.js"
	let userData = JSON.parse(getStorage("userInfo"));
	let stdid = userData.user.userId + 1;
	const selectedValue = ref("")
	const scoreData = reactive({
		studentscore: []
	});
	const childrp = reactive({
		rpDatas: [],
		Comment: []
	});
	const options = reactive([{
			value: '全部',
			label: '全部'
		},
		{
			value: '奖励',
			label: '奖励'
		},
		{
			value: '惩罚',
			label: '惩罚'
		},

	]);
	const getstdallscore = async (id) => {
		try {
			const res = await getscorebyid(id);
			console.log(res.datas);
			scoreData.studentscore = res.datas
			console.log(scoreData.studentscore);
		} catch (error) {
			console.error('获取成绩数据时出错:', error);
		}
	};
	//判断选择框的种类
	const type = (selectedValue) => {
		if (selectedValue == "奖励" || selectedValue == "惩罚") //如果是奖励或者惩罚就去res中取惩罚的数据并更改rpdata
		{
			getrpbyid(stdid).then(res => {
				childrp.rpDatas = []
				console.log(childrp.rpDatas);
				console.log(selectedValue);
				res.datas.forEach((data, index) => {

					if (res.datas[index].type == selectedValue) {
						childrp.rpDatas[index] = res.datas[index]
						console.log(childrp.rpDatas);
					} else {
						return 0
					}

				})
			})
		} else {
			getrp(stdid)
		}

	}
	const getcomment = (id) => {
		getcommentbyid(id).then(res => {
			console.log(res);
			childrp.Comment = res.datas
		})
	}
	const getrp = (id) => {
		getrpbyid(id).then(res => {
			childrp.rpDatas = res.datas

		})
	}
	const calculateTotalScore = () => {
		if (scoreData.studentscore.length === 0) return 0;

		const totalScore = scoreData.studentscore.reduce((sum, item) => sum + item.score, 0);
		return totalScore;
	};

	const calculateAverageScore = () => {
		if (scoreData.studentscore.length === 0) return 0;

		const totalScore = scoreData.studentscore.reduce((sum, item) => sum + item.score, 0);
		return (totalScore / scoreData.studentscore.length).toFixed(1); // 保留一位小数
	};
	onMounted(() => {
		getrp(stdid)
		console.log("stdid:" + stdid);
		getcomment(stdid)
		getstdallscore(stdid)
		render(stdid)
	});
	const option = reactive({
		tooltip: {
			trigger: 'item'
		},
		legend: {
			orient: 'vertical',
			left: 'left'
		},
		radar: {
			indicator: [{
					name: '数学',
					max: 100,
					min: 60
				},
				{
					name: '英语',
					max: 100,
					min: 60
				},
				{
					name: '物理',
					max: 100,
					min: 60
				},
				{
					name: '化学',
					max: 100,
					min: 60
				},
				{
					name: '语文',
					max: 100,
					min: 60
				},
			]
		},
		series: [{
			name: 'Score',
			type: 'radar',
			data: [{
				value: [85, 75, 75, 75, 75],
				name: 'Scores'
			}]
		}]
	});
	const render = (id) => {
		getscorebyid(id).then(res => {
			console.log(res.datas[0].score);
			console.log(option.series[0].data[0].value);
			res.datas.forEach((data, index) => {
				option.series[0].data[0].value[index] = data.score;
			});

			let Mychart = echarts.init(document.getElementById('echartsDom'));
			Mychart.setOption(option)
		})
	}
</script>

<template>
	<div class="item">
		<div class="Rpscore">
			<div class="Rp">
				<div id="Comment">您的孩子上课情况</div>
				<el-select v-model="selectedValue" placeholder="请选择您的孩子的惩罚或奖励" size="large" style="width: 240px;"
					@change="type">
					<el-option v-for="item in options" :label="item.label" :value="item.value" />
				</el-select>


				<el-table :data="childrp.rpDatas" style="width: 100%">
					<el-table-column prop="username" label="您的孩子" />
					<el-table-column prop="description" label="情况" />
					<el-table-column prop="type" label="种类" />
				</el-table>

			</div>
			<div class="score_container">
				<div class="score">
					<div style="margin-bottom: 20px">
						<el-table :data="scoreData.studentscore" style="width: 50%">
							<el-table-column prop="subject" label="科目" />
							<el-table-column prop="score" label="成绩" />
						</el-table>
					</div>
					<div class="average-score-container">
						<p>总分: {{ calculateTotalScore() }}</p>
						<p>平均分: {{ calculateAverageScore() }}</p>
					</div>
				</div>
				<div id="echartsDom" style="width: 35%;height:400px;float:right;transform:translateY(-50%);"></div>
			</div>

		</div>


		<div class="content">
			<div id="Comment">您的孩子上课情况</div>
			<el-table :data="childrp.Comment" style="width: 100%">
				<el-table-column prop="username" label="您的孩子" />
				<el-table-column prop="content" label="情况" />
				<el-table-column prop="created_at" label="时间" />
			</el-table>
		</div>

	</div>




</template>

<style scoped>
.item {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.Rpscore {
    display: flex;
    flex-direction: column;
    width: 45%;
    margin-right: 2.5%;
    position: relative; /* 相对定位 */
}

#select-container {
    position: relative; /* 相对定位 */
    z-index: 10; /* 设置较高的z-index，使其在图表上方 */
}

.score_container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

.score {
    width: 60%;
    margin-right: 2.5%;
}

.average-score-container {
    margin-top: 20px;
    text-align: center;
}

#echartsDom {
    width: 35%;
    height: 400px;
}

.content {
    width: 45%;
    margin-left: 2.5%;
}

#Comment {
    width: 100%;
    text-align: center;
    font-size: large;
    margin: 20px 0;
}


</style>